웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[JavaScript] 마우스로 선택된 범위 값 text로 불러오기, getSelection()

Last Modified : 2020-11-18 / Created : 2014-01-28
9,770
View Count
자바스크립트를 사용하여 선택된 영역, 드래그 영역의 텍스트를 가져올 수 있는 방법을 알아봅니다.




# 자바스크립트 getSelection() 정보

특정 범위의 텍스트가 선택 된 경우 getSelection()을 사용할 수 있습니다.


getSelection()

만약 선택된 범위에 콘텐츠가 있는 경우 getSelection()은 선택된 정보가 담긴 객체를 반환합니다. 즉 이를 사용하여 영역에 해당하는 텍스트 값 역시 가져올 수 있게 해줍니다.


! 자바스크립트 getSelection() 예제보기

아래는 간단한 예제입니다. 만약 선택된 영역이 존재하는 경우 이를 출력해봅니다. 예를들어 브라우저에서 아래왜 같이 "프리"만 선택된 경우를 생각해봅니다.

"웹이즈프리닷컴~ !"

이제 코드를 작성하고 결과를 확인해봅니다.
let selectedObj = window.getSelection();
let selected = selectedObj.getRangeAt(0).toString();

console.log(selected);

출력된 결과는 아래와 같습니다.
"프리"

이처럼 간단하게 텍스트를 가져오게 됩니다. 여기까지 텍스트를 가져오는 간단한 방법을 알아봤습니다.
참고로 위 코드는 IE 9 이상의 대부분의 브라우저에서 모두 호환됩니다.


아래는 선택된 영역의 텍스트를 바꾸는 링크입니다.
https://webisfree.com/2015-04-29/[자바스크립트]-드래그로-선택된-영역의-텍스트-바꾸기

Previous

[JavaScript] 함수의 예약어 return이란 ?

Previous

[자바스크립트] 배열값 중 일부 삭제 또는 둘로 나누는 방법, splice 함수